<template>
  <div class="all">
    <!-- {{mainData}} -->
    <div class="child" v-for="(item) in mainData" :key="item.menuId">
      <div class="childinner">
        <div class="img">
          <i :class="item.icon" @click="jumpToMenu(item)"></i>
        </div>
        <!-- <img class="img" src="../../../img/home/ystj.png" alt="用水统计" /> -->
        <div class="tlt">{{item.menuName}}</div>
      </div>
    </div>
    <!-- <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/xqgl.png" alt="小区管理" />
          <div class="tlt">小区管理</div>
        </div>
      </div>
      <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/sbl.png" alt="水表资料" />
          <div class="tlt">水表资料</div>
        </div>
      </div>
      <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/sbzl.png" alt="设备资料" />
          <div class="tlt">设备资料</div>
        </div>
      </div>
      <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/yhzl.png" alt="用户资料" />
          <div class="tlt">用户资料</div>
        </div>
      </div>
      <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/fqgl.png" alt="分区管理" />
          <div class="tlt">分区管理</div>
        </div>
      </div>
      <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/yccb.png" alt="远传抄表" />
          <div class="tlt">远传抄表</div>
        </div>
      </div>
      <div class="child">
        <div class="childinner">
          <img class="img" src="../../../img/home/tjgd.png" alt="添加更多" />
          <div class="tlt">添加更多</div>
        </div>
      </div> -->
  </div>
</template>
<script>
export default {
  props: ['HistoricalStepData'],
  data() {
    return {
      mainData: [],
    }
  },
  watch: {
    HistoricalStepData: {
      deep: true,
      handler(newVal, oldVal) {
        console.log('FFFFFFFFFFFFFFFFFFFFF')
        this.mainData = JSON.parse(JSON.stringify(newVal))
      },
    },
  },
  created() {
    this.mainData = JSON.parse(JSON.stringify(this.HistoricalStepData))
  },
  methods: {
    jumpToMenu(title) {
      console.log(this.$store.state.permission.routers)
      let url = ''
      let parents = this.$store.state.permission.routers
      let obj = {}
      for (let i = 0; i < parents.length; i++) {
        obj = parents[i]
        if (obj.children) {
          for (let j = 0; j < obj.children.length; j++) {
            if (title.indexVue.indexOf(obj.children[j].path) != -1) {
              url = obj.path + '/' + obj.children[j].path
              break
            }
          }
        }
        if (url.length > 0) {
          break
        }
      }
      console.log(url)
      console.log(title)
      if (url.length == 0) {
        alert('无法完成跳转,请从菜单进入!!')
        return
      }
      this.$router.push({
        path: url,
        query: {},
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.all {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .child {
    width: 25%;
    height: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 35px 0px;
    // border: 1px solid firebrick;
    .childinner {
      min-width: 60px;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // color: #0E9BC4;
      .img {
        color: #269ae1;
        font-size: 40px;
      }
      .tlt {
        color: #434343;
        font-size: 13px;
        margin-top: 10px;
        white-space: nowrap;
      }
    }
  }
}
</style>
